<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Nested Groups example</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>

  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
  This example demonstrate using groups. Note that a DataSet is used for both
  items and groups, allowing to dynamically add, update or remove both items
  and groups via the DataSet.
</p>
<div id="visualization"></div>

<script>
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var itemCount = 60;

  // create a data set with groups
  var groups = new vis.DataSet();

  groups.add([
    {
      id: 1,
      content: "Lee",
      nestedGroups: [11,12,13]
    },
    {
      id: 2,
      content: "invisible group",
      visible: false
    },
    {
      id: 3,
      content: "John",
      nestedGroups: [14],
      showNested: false
    },
    {
      id: 4,
      content: "Alson"
    },

  ]);

  groups.add([
    {
      id: 11,
      content: "cook",
    },
    {
      id: 12,
      content: "shop",
    },
    {
      id: 13,
      content: "clean house",
    },
    {
      id: 14,
      content: "wash dishes",
    }
  ]);

  // create a dataset with items
  var items = new vis.DataSet();
  var groupIds = groups.getIds();
    var types = [ 'box', 'point', 'range', 'background']
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 200, 'hours');
    var end = start.clone().add(2, 'hours');
    var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
    var type = types[Math.floor(4 * Math.random())]

    items.add({
      id: i,
      group: randomGroupId,
      content: 'item ' + i,
      start: start,
      end: end,
      type: type
    });
  }

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    groupOrder: 'content'  // groupOrder can be a property name or a sorting function
  };

  var timeline = new vis.Timeline(container, items, groups, options);

</script>
</body>
</html>